import React, { Component } from 'react'
import Left from './left'
 class App extends Component {

   state = {
       val :"", // 这个变量用于接收input框的值
       val1:"" ,// 用于接收第二个输入框的值
       flag:false,
       flag1:true
   }
   changeVal(e){
       console.log(e.target.value)
       this.setState({ // 第18航得输入框受state下的val得控制，如果val不被赋值，输入框输入不进去东西
           val:e.target.value
       })
   }
   changeVal1(e){
    console.log(e.target.value)
    // this.setState({ // 第18航得输入框受state下的val得控制，如果val不被赋值，输入框输入不进去东西
    //     val:e.target.value
    // })
}
changFlag(){
     this.setState({   // this.setState是异步得，那我获取最新的值呢
        flag:!this.state.flag
     },()=>{ // 这个回到函数render完执行，页面更新完毕之后执行
        console.log(this.state.flag)
     })
    //  setTimeout(()=>{ // 要想获取this.setState后最新值得第一种办法
    //     console.log(this.state.flag)
    //  },100)
   
}
  render() {
    return (
     // 在react里获取input框的值有两种，第一种叫受控组件，第二中叫非受控组件
      <div>
          {
              this.state.flag1? <Left></Left>:"暂无数据"
          }
          <button onClick={()=>{this.setState({flag1:!this.state.flag1})}}>点击我创建销毁组件</button>
          <input type="text" value={this.state.val} onChange={this.changeVal.bind(this)} />
          <hr />

          <input type="text" defaultValue={this.state.val1} onChange={this.changeVal1.bind(this)}/>
          <hr />
          <input type="checkbox" checked={this.state.flag} onChange={this.changFlag.bind(this)}/>
      </div>
    )
  }
}

export default App